<!--
 * @Author: heyang
 * @Date: 2024-07-17 18:35:23
 * @LastEditors: william-occam
 * @LastEditTime: 2024-10-15 23:06:44
 * @FilePath: \draw-project\src\views\draw\index.vue
 * @Description:
 *
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved.
-->

<script setup lang="ts">
defineOptions({
  name: "DrawPage"
});
import { effect, onMounted, reactive, ref } from "vue";
import DrawPageMain from "./main.vue";
import { ElMessage } from 'element-plus'
import { useColumns } from "./columns";


interface RowVO {
  id: number;
  name: string;
  role: string;
  sex: string;
  age: number;
  address: string;
}


const { columns, dataList, adaptiveConfig, selectVal ,selectOptions,zhuanJiaListStore, drawnNames, selectChange, getRandomElements, getSpecifiedAndRandomItems} = useColumns();


const drawCount = ref(1);
let intervalId = null;
let renderIntervalId = null; //抽取 渲染定时器ID
const duration = 3000; // 滚动间隔时间，单位ms
// 当前展示的数组元素
const currentItem = ref([]);
const tempCanDrawList = ref(dataList.value);

/**
 * @description: 开始抽取按钮
 * @return {*}
 */
const startDrawing = () => {

  //工程类名单
  if (selectVal.value === 'gongcheng') {
    const tempList = zhuanJiaListStore.zhuanJiaReadyList.map(v => v?.cardID) || [];
    tempCanDrawList.value = dataList.value.filter(v => !tempList.includes(v?.cardID))
  }
  //政府采购类名单
 if(selectVal.value === 'zhengfucaigou') {
    const tempList = zhuanJiaListStore.zhengFuReadyDrawlist.map(v => v?.cardID) || [];
    tempCanDrawList.value = dataList.value.filter(v => !tempList.includes(v?.cardID))
  }
  //医疗类名单
  if (selectVal.value === 'yiliao') {
    const tempList = zhuanJiaListStore.yiLiaoReadyDrawList.map(v => v?.cardID) || [];
    tempCanDrawList.value = dataList.value.filter(v => !tempList.includes(v?.cardID))
  }
  if (drawCount.value > tempCanDrawList.value.length) {
    return ElMessage({
      message: '无效抽取！当前想要的抽取数大于未抽取名单总人数!',
      type: 'warning',
    })
  }
  //抽取效果
  drawRender()
  //每次抽取前清空已经抽取的名单
  drawnNames.value.length = 0;
  clearInterval(intervalId);
  intervalId = setInterval(() => {
    clearInterval(intervalId);
    clearInterval(renderIntervalId);
    let canDrawList = []
    if (selectVal.value === 'gongcheng') {
      const tempList = zhuanJiaListStore.zhuanJiaReadyList.map(v => v?.cardID) || [];
      canDrawList = dataList.value.filter(v => !tempList.includes(v?.cardID))
    }
    if(selectVal.value === 'zhengfucaigou') {
      const tempList = zhuanJiaListStore.zhengFuReadyDrawlist.map(v => v?.cardID) || [];
      canDrawList = dataList.value.filter(v => !tempList.includes(v?.cardID) )
    }
    if (selectVal.value === 'yiliao') {
      const tempList = zhuanJiaListStore.yiLiaoReadyDrawList.map(v => v?.cardID) || [];
      canDrawList = dataList.value.filter(v => !tempList.includes(v?.cardID) )
    }
    const drawedList = getSpecifiedAndRandomItems(canDrawList, drawCount.value) ||[]; //抽中的数据
    drawnNames.value = drawedList.map(v => {
      const { name, cardID, telNum} = v;
      return `${name}-${cardID}-${telNum}`
    })
    // 设置已经抽中的
    if (selectVal.value === 'gongcheng') {
      zhuanJiaListStore.setZhuanJiaReadyList(drawedList)
    } if(selectVal.value === 'zhengfucaigou') {
      zhuanJiaListStore.setZhengFuReadyDrawlist(drawedList)
    }
    if (selectVal.value === 'yiliao') {
      zhuanJiaListStore.setYiLiaoReadyDrawList(drawedList)
    }
    currentItem.value = [];
    ElMessage({
    message: '抽取成功！',
    type: 'success',
  })
  }, duration);
};


// 抽取效果
const drawRender = () => {
  if (drawCount.value < 1) {
    return ElMessage({
    message: '抽取数量最小为1!',
    type: 'warning',
  })
  }
  renderIntervalId = setInterval(() => {
    const list = getRandomElements(dataList.value, 6) || [];
    currentItem.value = list.map(v => {
      const { name, cardID, telNum} = v;
      return `${name}-${cardID}-${telNum}`
    })
  }, 200);
};
</script>

<template>
  <div>
    <div class="flex">
      <div>
        <p>类别</p>
        <el-select
          v-model="selectVal"
          placeholder="Select"
          style="width: 240px"
          @change="selectChange"
        >
          <el-option
            v-for="item in selectOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="ml12">
        <p>数量</p>
        <el-input-number v-model="drawCount" controls-position="right" />
      </div>
      <div class="ml12">
        <el-button @click="startDrawing">开始抽取</el-button>
      </div>
      <!-- <div class="displayTransition">{{ currentItem }}</div> -->
    </div>
    <!-- 抽取结果 -->
    <div class="mb-8">
      <div class="mb-2 flex">
       <div class="gradient-text">抽取结果</div>
    </div>

      <div class="drawResults">
        <!-- <div class="gradient-text">  {{drawnNames.toString()}}</div> -->
        <ul class="showul">
        <li v-for="name in drawnNames" >{{name}}</li>
      </ul>
        <!-- {{currentItem.toString()}} -->
        <ul class="showul">
      <li v-for="talk in currentItem" >{{talk}}</li>
    </ul>
      </div>
    </div>
    <pure-table
      row-key="id"
      align-whole="center"
      :header-cell-style="{
        background: 'var(--el-fill-color-light)',
        color: 'var(--el-text-color-primary)'
      }"
      :data="dataList"
      :columns="columns"
      :adaptiveConfig="adaptiveConfig"
    >
    </pure-table>

  </div>
</template>

<style scoped>
.ml12 {
  margin-left: 12px;
}
.flex {
  display: flex;
  margin-bottom: 12px;
  align-items: end;
}
.displayTransition {
  margin-left: 20px;
  width: 200px;
  height: 30px;
  /* background-color: aqua; */
  color: red;
  font-size: 20px;
}
.drawResults {
  background: linear-gradient(to right, #e5e5e9, #ffffff);
  /* 视口高度 */
  width: 100%;
  min-height: 200px;
  padding: 12px 0 12px 60px;
  display: flex;
  justify-content: center;
  align-items: center
}
.gradient-text {
  font-size: 20px;
  font-weight: bold;
  background: -webkit-linear-gradient(#1c1c1d, #909099);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.showul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  li {
    margin-right: 60px;
    font-size: 20px;
    width: 330px;
    font-weight: bold;
    background: -webkit-linear-gradient(#1c1c1d, #8080b1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
</style>
